<template>
  <div class="common-layout__cover1">
    <div
      class="video-card-cover link"
      :style="{
        'background-image':
          'url(&#34;' +
          commonApi.getCover(props.videoInfo!.coverPath) +
          '&#34;)',
        height: props.height + 'px',
      }"
      @click="router.toVideo(props.videoInfo!.id)"
    >
      <div class="footer">
        <div>
          <el-icon size="18px">
            <VideoPlay />
          </el-icon>
          <span style="margin-left: 3px">{{
            numberConversion(Number(props.videoInfo.viewCount))
          }}</span>
          <span>{{ timeConversion(props.videoInfo.totalTime) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import commonApi from "@/api/common";
import router from "@/router/router";
import { numberConversion, timeConversion } from "@/utils/common";
import { VideoPlay } from "@element-plus/icons-vue";
import { Video } from "@/types/video";

const props = defineProps({
  height: {
    type: Number,
    require: false,
    default: 130,
  },
  videoInfo: {
    required: true,
    type: Object as () => Video,
  },
});
</script>

<style lang="scss" scoped>
.common-layout__cover1 {
  .video-card-cover {
    margin: 0 auto;

    position: relative;
    border-radius: 5px;
    border: 1px solid #eeeeee;
    overflow: hidden;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    transition: all 0.2s;

    &:hover {
      opacity: 50%;
    }

    & > .footer {
      color: #ffffff;
      font-size: 14px;
      font-weight: 200;
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 40px;
      background: linear-gradient(
        rgb(0, 0, 0, 0),
        rgb(0, 0, 0, 0.5),
        rgb(0, 0, 0, 0.8)
      );

      & > div {
        position: absolute;
        width: 100%;
        bottom: 5px;
        left: 2px;
        display: flex;
        align-items: center;

        & > span:last-child {
          position: absolute;
          right: 7px;
        }
      }
    }
  }
}

</style>
